<template>
    <div>
        <ul>
        <router-link tag="li" to="">
            <span><b>{{money}}</b>元</span>
            <span>我的余额</span>
        </router-link>
        <router-link tag="li" to=""> 
            <span><b>{{discount}}</b>张</span>
            <span>我的优惠</span>
        </router-link>
        <router-link tag="li" to="">
            <span><b>{{integral}}</b>分</span>
            <span>我的积分</span>
        </router-link>
        </ul>
    </div>
</template>

<script>

export default {
    components: {
    },
    props: [
        'money','discount','integral'
    ],
    data() {
        return {

        };
    },
    methods: {

    },
}
</script>
<style  scoped>
ul{
    margin: 0;
    padding:0;
    display: flex;
    margin-bottom: 3vw;
}
li{
    list-style-type:none;
    flex: 1;
    background-color: #f5f5f5;
    padding-bottom: 3vw;
}
b{
    font-size: 8vw;
    font-weight: bold;
    padding: 0;
}
span:first-child{
    margin-top:3vw;
}
span{
    display:block;
    text-align: center;
    font-size: 4vw;
}
li:first-child>span>b{
    color: #ff9900;
}
li:last-child>span>b{
    color: #6ac20b;
}
li:nth-child(2)>span>b{
    color: #ff5f3e;
}
li:first-child {
    border-right:2px white solid; 
}
li:last-child {
    border-left:2px white solid; 
}
</style>